1
00:00:00,680 --> 00:00:01,690
Hello and welcome.

2
00:00:01,700 --> 00:00:07,350
In this lecture we are going to create their functionality for our projet.

3
00:00:07,370 --> 00:00:10,210
He is in javascript.

4
00:00:10,370 --> 00:00:13,340
We are going to create a few functions.

5
00:00:13,650 --> 00:00:15,790
I've created the first one here.

6
00:00:15,940 --> 00:00:23,780
Call it get time remaining when defining functions you type in the word function followed by a space

7
00:00:24,230 --> 00:00:26,210
and then the name you call the function.

8
00:00:26,210 --> 00:00:31,040
Always name your functions to reflect what you want them to do.

9
00:00:31,250 --> 00:00:40,310
Every fanchon will have a parenthesis and it can be empty or you can pass in values also known as arguments

10
00:00:40,790 --> 00:00:46,790
or Param if those note is a past it a Param if our argument chord.

11
00:00:46,850 --> 00:00:53,940
End Time the end time is a property that returns the time that ends in second.

12
00:00:53,960 --> 00:00:59,470
A return they end in time in seconds.

13
00:00:59,580 --> 00:01:02,650
Line 2.

14
00:01:02,750 --> 00:01:10,770
I have created a vereb line and got a variable chord have named D just with a letter T.

15
00:01:10,920 --> 00:01:17,670
I know I've set it to equalize to date dot pass and then pass it on.

16
00:01:17,870 --> 00:01:26,150
Arguments of end time which we spoke about form land on end the end time property then time property

17
00:01:26,190 --> 00:01:29,840
basically returns the time ending in seconds.

18
00:01:29,840 --> 00:01:39,200
I have said that to a minus date and got pass and then in there you will pass the in the new date function

19
00:01:39,290 --> 00:01:53,980
or method the date dot pass method is used to pass a date or string and returns the number of milliseconds.

20
00:01:54,210 --> 00:02:06,530
Okay so usually is between the date string and the midnight of January 1 1970 online to move got the

21
00:02:06,560 --> 00:02:10,890
new date here a new date for objet here.

22
00:02:11,060 --> 00:02:12,240
So what that does.

23
00:02:12,420 --> 00:02:21,770
Pretending equals an instance of the date and which represents a single moment in time the date objects

24
00:02:21,860 --> 00:02:25,030
are usually based on the time value.

25
00:02:25,210 --> 00:02:34,200
All right that is usually the number of milliseconds since January refers 1970.

26
00:02:36,690 --> 00:02:49,740
Line 3 created a variable corsicans which have set two equal to the maths dot floor method.

27
00:02:50,480 --> 00:03:02,300
The mass floor function is a javascript function that is used to return their largest integer less down

28
00:03:02,360 --> 00:03:06,440
or equal to a given number.

29
00:03:07,380 --> 00:03:09,300
So only in 3 there.

30
00:03:09,380 --> 00:03:16,190
I have the maths still flawed function past it inside this parameter.

31
00:03:16,200 --> 00:03:17,960
I've passed it.

32
00:03:17,960 --> 00:03:27,170
The variable from line to divided that by a thousand and then take in 60 percent of that that will give

33
00:03:27,170 --> 00:03:30,760
us the seconds the time in seconds.

34
00:03:30,790 --> 00:03:31,770
Line 4.

35
00:03:31,940 --> 00:03:36,090
I've done a similar thing to achieved a time in minutes.

36
00:03:36,200 --> 00:03:38,440
Line 5 done the same thing.

37
00:03:38,440 --> 00:03:45,570
To achieve the time in our 24 hours give me a 24 hour clock right.

38
00:03:45,770 --> 00:03:59,300
Notice that line 4 divided and divide that by 60 then and the percentage however lime 5 done the same

39
00:03:59,300 --> 00:04:04,280
in thousand times 60 times 60 again.

40
00:04:05,000 --> 00:04:07,600
Then the percentage is 24.

41
00:04:07,940 --> 00:04:13,650
Okay that will give us the hours then to get two days which is on line 6.

42
00:04:13,850 --> 00:04:16,860
Did similar thing that you divided.

43
00:04:16,910 --> 00:04:22,990
You have a thousand times 60 times 60 times 24 hour right.

44
00:04:23,000 --> 00:04:29,330
That would give us the days you divide the variable by the variable t.

45
00:04:29,330 --> 00:04:36,590
Divide that by these values when you have values are in parentheses.

46
00:04:36,590 --> 00:04:39,170
That means you do the.

47
00:04:39,180 --> 00:04:41,990
You achieve this first.

48
00:04:43,090 --> 00:04:49,040
What that means the multiplication will take place first before the division.

49
00:04:49,080 --> 00:04:49,960
All right.

50
00:04:50,020 --> 00:04:57,200
And same similar things were that it did a multiplication before did division with anything in parentheses.

51
00:04:57,360 --> 00:05:11,280
It's takes a precedent Waller line 7 deep hole so specified return lot you can define returns with functions

52
00:05:11,280 --> 00:05:16,110
functions don't have to return anything but if you want them to return something you can always use

53
00:05:16,110 --> 00:05:24,960
a return so I specified that here on line 7 to return these values okay to return the total time to

54
00:05:24,960 --> 00:05:33,000
this total variable changes mid days hours minutes and seconds so these are the values that asks the

55
00:05:33,000 --> 00:05:38,880
function to return based on the values I have specified.

56
00:05:39,030 --> 00:05:45,390
I have added another function from like 15 to 37.

57
00:05:45,410 --> 00:05:53,400
Its function IV chord initialize clock so this is a function that initialize the clock past past two

58
00:05:53,520 --> 00:05:55,980
arguments or two parameters.

59
00:05:55,980 --> 00:05:57,770
First is the eidy.

60
00:05:57,780 --> 00:06:03,690
This second is the end time as already mentioned the end time property.

61
00:06:03,710 --> 00:06:06,660
Spot the idea you will take.

62
00:06:06,660 --> 00:06:09,310
It would also have loop fully.

63
00:06:09,390 --> 00:06:11,410
So the two two parameters.

64
00:06:11,410 --> 00:06:15,090
Here is an end time line 16 to 20.

65
00:06:15,090 --> 00:06:21,450
I define a few variables then the variable names are self explanatory.

66
00:06:21,450 --> 00:06:28,010
I have said it to was so documental get any member Heidi notice of past it.

67
00:06:28,020 --> 00:06:38,280
The idea here and basically the document that query selects a method is used to return the first element

68
00:06:38,760 --> 00:06:41,240
that matches is specified.

69
00:06:41,240 --> 00:06:46,670
See it says select or select TAWS in the document.

70
00:06:46,870 --> 00:06:54,800
All right so the query method only returns a first element that matches the specified select top.

71
00:06:55,290 --> 00:06:57,070
So here these are these select.

72
00:06:57,080 --> 00:07:07,220
So you've got these variable here cause to clock dot queries select all and pass it days variables.

73
00:07:07,440 --> 00:07:12,520
That is we created if we go up here we created these variables there.

74
00:07:12,630 --> 00:07:15,680
So we've got the returns and days hours and so on.

75
00:07:15,680 --> 00:07:19,960
So that's what is referring to the hours here.

76
00:07:20,080 --> 00:07:28,740
The query selector will return that and that will return these so these days are Was minutes.

77
00:07:28,830 --> 00:07:30,130
These are.

78
00:07:30,300 --> 00:07:33,820
If we are going on our highest amount which you see here.

79
00:07:33,870 --> 00:07:35,970
We got this idea.

80
00:07:35,970 --> 00:07:44,100
We've got less screw up we've got class hours who got minutes.

81
00:07:44,230 --> 00:07:46,300
We've got seconds.

82
00:07:46,770 --> 00:07:51,770
So if I go by car and you see notice the dot here represents the clocks anyway.

83
00:07:51,780 --> 00:07:59,240
If you got an ideal be a hashtag so did dot represents a class for this query select or met a takes

84
00:07:59,250 --> 00:08:02,140
in the day class.

85
00:08:02,160 --> 00:08:08,730
Our class main it's class and second class is classes where all defined in the highest tier male are

86
00:08:08,800 --> 00:08:10,430
asked what that means.

87
00:08:10,600 --> 00:08:15,430
Created another function here on line 22 code of data clock.

88
00:08:15,600 --> 00:08:19,670
This will be used to update the clock and given a variable of.

89
00:08:19,800 --> 00:08:24,820
It would take the variable we defined early and get time remaining past to the end time.

90
00:08:25,140 --> 00:08:34,900
Right then these are various other properties so these days that span an element said that to the T

91
00:08:34,920 --> 00:08:36,740
variable days.

92
00:08:37,090 --> 00:08:48,290
And notice here I have use a slice method the slice method basically is used to extract parts of the

93
00:08:48,300 --> 00:08:53,210
string and it returns the extracted part in a new string.

94
00:08:53,460 --> 00:08:57,280
So the first character usually has a position of zero.

95
00:08:57,300 --> 00:09:00,410
The second has a position of one and so on.

96
00:09:00,430 --> 00:09:06,650
However you can also use negative numbers to select from the in the in if you use a negative number.

97
00:09:06,660 --> 00:09:10,980
It was make the selection from the end of the string.

98
00:09:11,130 --> 00:09:14,590
String is also known as text.

99
00:09:14,610 --> 00:09:24,240
We've got an issue statement here saying if this value is less than what's with this then clear the

100
00:09:24,240 --> 00:09:31,410
time interval and we've got then we here with the updated clock we've got the variable time interval.

101
00:09:31,480 --> 00:09:37,990
Course set intervals always set and we are dating the clock every milliseconds.

102
00:09:38,010 --> 00:09:39,110
That's what that means.

103
00:09:39,150 --> 00:09:39,540
All right.

104
00:09:39,540 --> 00:09:41,800
Just to update the clock.

105
00:09:43,450 --> 00:09:47,390
Okay a line 38 39 kind variable here.

106
00:09:47,400 --> 00:09:52,020
Your deadline cely goes to a new date object.

107
00:09:52,090 --> 00:10:01,100
We passed it is a day dot pass method and we want some values here in this new date method object.

108
00:10:01,210 --> 00:10:12,360
So got we adding a plot 7 7 days of the week and then times 24 hours of the day time is 60 seconds.

109
00:10:12,800 --> 00:10:17,850
16 cities so I can give you one minute and in 60 seconds again.

110
00:10:17,870 --> 00:10:20,530
Now multiply by the interval.

111
00:10:20,560 --> 00:10:22,260
Which is this interval here.

112
00:10:22,520 --> 00:10:25,680
Okay here we have we call this function here.

113
00:10:25,690 --> 00:10:28,290
The initialised function this clock here.

114
00:10:28,330 --> 00:10:33,090
We're calling this function here and we've passed it to variable.

115
00:10:33,090 --> 00:10:35,530
Plus T D clock D.

116
00:10:36,040 --> 00:10:41,510
Which is the total clock Dave and Oswal past is variable called deadline.

117
00:10:41,720 --> 00:10:44,540
Alright so we're calling this function.

118
00:10:44,540 --> 00:10:45,800
We defined you like 15.

119
00:10:45,800 --> 00:10:51,460
Were calling it here to initialize the clock to get the clock started right.

120
00:10:51,540 --> 00:10:59,090
So if the early parts of this functions you don't understand please do let me know.

121
00:10:59,140 --> 00:11:03,520
Here the hours are span in I means.

122
00:11:03,910 --> 00:11:08,230
It will replace what's in the Dave.

123
00:11:08,340 --> 00:11:09,580
Dave here.

124
00:11:09,760 --> 00:11:12,950
This is an elemental open good thing.

125
00:11:12,970 --> 00:11:15,060
They are defined here in this bad.

126
00:11:15,190 --> 00:11:17,570
So that's what is referring to.

127
00:11:17,620 --> 00:11:21,750
It will replace the content where these values are right.

128
00:11:21,900 --> 00:11:25,660
0 plus this t refers to the variables don't ours.

129
00:11:25,820 --> 00:11:29,800
This refers to these values we've already defined.

130
00:11:29,800 --> 00:11:33,120
I've already mentioned what the slice method does.

131
00:11:33,180 --> 00:11:39,990
All right so that's it hard to save the code if you are.

132
00:11:42,810 --> 00:11:43,680
This is a clock.

133
00:11:43,680 --> 00:11:49,680
If I refresh it it should that function should kick in and initialize the clock.

134
00:11:49,990 --> 00:11:50,770
Ah right.

135
00:11:50,800 --> 00:11:59,340
--'s So we've set the clock is ticking away now to show you how to change if you wanted to change

136
00:11:59,430 --> 00:12:04,260
today's quietly set it to do time for that day.

137
00:12:04,260 --> 00:12:12,310
If we go this is where we actually set the timer have set it in the moment to seven days.

138
00:12:12,510 --> 00:12:19,180
So if you wanted to change for example send it did time for an event that's happening in 30 days time.

139
00:12:19,320 --> 00:12:20,620
This is where you change it.

140
00:12:20,630 --> 00:12:22,750
Change is number 30.

141
00:12:22,930 --> 00:12:25,180
These you can leave standard.

142
00:12:25,230 --> 00:12:28,250
This will represent the hour.

143
00:12:28,290 --> 00:12:29,910
This will represent the minutes.

144
00:12:29,910 --> 00:12:33,250
This will represent a second and this would be the time interval.

145
00:12:33,250 --> 00:12:37,440
All right so the only thing you really need to change if you want to change the days is this is where

146
00:12:37,440 --> 00:12:38,210
you change it.

147
00:12:38,220 --> 00:12:39,600
All right.

148
00:12:39,850 --> 00:12:41,460
Just to let you know.

149
00:12:41,790 --> 00:12:50,250
So that's how our countdown clock is ticking away quietly settled at the moment for an event that all

150
00:12:51,210 --> 00:12:56,830
expire in six days time so he's counting down to the event the moment.

151
00:12:56,880 --> 00:12:58,020
Thanks for watching.

152
00:12:58,020 --> 00:12:59,000
Bye for now.